<template>
  <view class="page-content">
    <view class="person-msg">
      <!-- <view class="swiper-box">
        <u-swiper
          :list="list"
          :circular="false"
          :effect3d="true"
          :autoplay="false"
          bg-color="transparent"
          height="492"
          mode="none"
          effect3d-previous-margin="128"
        ></u-swiper>
      </view> -->
      <view class="bgc"></view>
      <view class="person-msg-content">
        <image
          class="person-pic"
          :src="detailInfo.photo ? detailInfo.photo : ''"
          mode=""
        ></image>
        <view class="person-name"> {{ detailInfo.name }} </view>
        <view class="person-age-sex">
          <text>{{ detailInfo.age }}岁</text>
          <text>{{ detailInfo.sex }}</text>
          <text>{{ detailInfo.fullTimeStatus ? '全职' : '兼职' }}</text>
        </view>
        <view class="person-desc flex-row justify-start items-center">
          <u-image
            width="30rpx"
            height="32rpx"
            src="/static/index/time-light.png"
          ></u-image>
          <text class="ml-6">空闲时间：{{ detailInfo.freeTime }}</text>
        </view>
      </view>
      <view class="common-box">
        <form-item-title text="备注"></form-item-title>
        <view class="beizhu-msg">
          {{ detailInfo.remark ? detailInfo.remark : '' }}
        </view>
      </view>
      <view class="common-box">
        <form-item-title text="帮遛师位置"></form-item-title>
        <!-- <view class="map-box"> 地图 </view> -->
        <map
          style="
            width: 100%;
            height: 320rpx;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            margin-top: 28rpx;
          "
          :latitude="detailInfo.lng"
          :longitude="detailInfo.lat"
        >
        </map>
      </view>
    </view>

    <view class="bottom-box">
      <view class="form-box">
        <view class="flex-row justify-between items-center group_16">
          <view class="flex-col button_3">
            <text class="self-start font_3 text_28">帮遛预算</text>
            <view class="flex-row items-center self-stretch section_11 mt-7">
              <text class="text_30">{{ detailInfo.price }}</text>
              <text>/小时</text>
            </view>
          </view>
          <view class="chat-btn"> 聊一聊 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import formItemTitle from 'components/index/form-item-title.vue'
export default {
  components: {
    formItemTitle,
  },
  data() {
    return {
      detailInfo: {
        address: '',
        age: 0,
        createBy: '',
        createTime: '',
        distance: '',
        freeTime: '',
        fullTimeStatus: 0,
        id: 0,
        lat: '',
        lng: '',
        name: '',
        nowLat: '',
        nowLng: '',
        params: {},
        photo: '',
        price: '',
        publisher: '',
        publisherId: '',
        rType: '',
        remark: '',
        sex: '',
        sortFiled: '',
        sortType: '',
        status: 0,
        updateBy: '',
        updateTime: '',
      },
      list: [
        {
          image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东',
        },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
          title: '身无彩凤双飞翼，心有灵犀一点通',
        },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
        },
      ],
    }
  },
  onLoad(option) {
    this.detailInfo = JSON.parse(option.item)
    console.log(this.detailInfo, '帮流失详情')
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  .person-msg {
    flex: 1;
    overflow-y: auto;

    .swiper-box {
      padding-top: 76rpx;
    }
    .bgc {
      width: 100%;
      height: 200rpx;
      background-color: #fcd610;
    }
    .person-msg-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #fff;
      padding-bottom: 25rpx;
      .person-pic {
        width: 132rpx;
        height: 132rpx;
        background: #ffffff;
        border-radius: 50%;
        margin-top: -66rpx;
      }

      .person-name {
        font-weight: bold;
        font-size: 48rpx;
        color: #000000;
        margin-top: 24rpx;
      }

      .person-age-sex {
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        margin-top: 8rpx;
        display: flex;

        > text {
          &:first-child {
            margin-left: 0;
          }

          display: block;
          margin-left: 24rpx;
        }
      }

      .person-desc {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
        margin-top: 24rpx;
        padding: 0 48rpx;
        text-align: left;
        width: 100%;
        line-height: 44rpx;
      }
    }
  }
  .common-box {
    padding: 32rpx 38rpx;
    border-bottom: solid 2rpx #f6f6f6;
    background: #fff;
    margin-top: 10rpx;
    .driver-msg {
      .car {
        > image {
          margin-top: 32rpx;
        }

        .name {
          margin-top: 24rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    .beizhu-msg {
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
    }

    .map-box {
      height: 312rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      background-color: #000;
    }
  }
  .bottom-box {
    padding: 16rpx 0;
    background: #ffffff;
    box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    .chat-btn {
      width: 466rpx;
      height: 96rpx;
      background: #fcd610;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
    }
    .mt-7 {
      margin-top: 14rpx;
    }

    .group_16 {
      padding-left: 36rpx;
      padding-right: 28rpx;

      .button_3 {
        width: max-content;

        .font_3 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22.4rpx;
          font-weight: 700;
          color: #666666;
        }

        .text_28 {
          color: #000000;
        }

        .section_11 {
          .text_31 {
            color: #000000;
            font-size: 24rpx;
            line-height: 17.72rpx;
          }

          .text_30 {
            color: #ff7676;
            font-size: 40rpx;
            line-height: 28.48rpx;
          }
        }
      }

      .button_4 {
        padding: 28rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        width: 318rpx;
        height: 84rpx;

        .font {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 30.02rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_29 {
          line-height: 29.88rpx;
        }
      }
    }
  }
}
</style>